<template>
  <div>
    <!-- 首页的头部 -->
    <HomeHeader :navList="navList"></HomeHeader>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
      <van-swipe-item v-for="(sw, index) in swiperList" :key="index">
        <img style="width:100%" :src="sw.picUrl" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 轮播图下的保障 -->
    <van-row class="policy_info">
      <van-col v-for="(policy, index) in policyDescList" :key="index" span="8">
        <img class="myicon" :src="policy.icon" alt="">
        <span>{{ policy.desc }}</span>
      </van-col>
    </van-row>
    <!-- 宫格 -->
    <van-grid icon-size="1.5rem" style="margin-top: .53rem;" :column-num="5" :border="false">
      <van-grid-item style="margin-top: -0.53rem;" v-for="(cls, index) in classificationList" :key="index"
        :icon="cls.picUrl" :text="cls.text" :url="cls.schemeUrl" />
    </van-grid>
    <!-- 爆款直降 -->
    <div>
      <!-- 爆款直降上 -->
      <a class="popular" :href="popularList.schemeUrl">
        <van-swipe duration="0" :show-indicators="false" class="popularImg" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="floor in popularList.itemList" :key="floor.id">
            <img class="smallImage" :src="floor.picUrl" alt="" />
            <!-- {{ floor.picUrl }} -->
          </van-swipe-item>
        </van-swipe>
      </a>
      <!-- 爆款直降下 -->
      <!-- <van-row>
        <van-col v-for="(popDown, index) in popularDownList" :key="index" span="8">
          <a class="healthy" :style="{ 'background-image': `url(${popDown.picUrl})` }" :href="popDown.schemeUrl">
            <img :src="popDown.itemList[0].picUrl" alt="">
          </a>
        </van-col>
      </van-row> -->
    </div>
    <!-- 新人专享 -->
    <div class="newPerson">
      <div class="people">
        <span>—</span>
        <span>新人专享礼</span>
        <span>—</span>
      </div>
      <van-row class="newPeople" justify="center">
        <van-col class="newPeopleCol" span="12">
          <div class="newPeopleLeft">
            <span>新人专享红包</span>
            <img src="./images/newPeople.png" alt="">
          </div>
        </van-col>
        <van-col class="newPeopleCol" span="12">
          <div class="newPeopleRight">
            <div class="newPeopleRightTop" v-for="(inam, index) in indexActivityModule" :key="index">
              <p class="newPeopleTitle1">{{ inam.title }}</p>
              <p class="newPeopleTitle2">{{ inam.subTitle }}</p>
              <p class="newPeopleTitle2">{{ inam.tag }}</p>
              <img :src="inam.showPicUrl" alt="">
              <div class="price">
                <p>{{ inam.activityPrice }}</p>
                <p>{{ inam.originPrice }}</p>
              </div>
            </div>
          </div>
        </van-col>
      </van-row>
    </div>
    <!--类目热销榜 -->
    <div class="hot">
      <p>{{ categoryHotSellModule.title }}</p>
      <van-row class="hotRow">
        <van-col class="hotCol12" span="12" v-for="(item, index) in categoryHotSellModule.categoryList.splice(0, 2)"
          :key="index">
          <div>
            <p>{{ item.categoryName }}</p>
            <span>—</span>
            <img :src="item.showPicUrl" alt="">
          </div>
        </van-col>

        <van-col class="hotCol6" span="6" v-for="(item, index) in categoryHotSellModule.categoryList" :key="index">
          <div>
            <p>{{ item.categoryName }}</p>
            <img :src="item.showPicUrl" alt="">
          </div>
        </van-col>

      </van-row>
    </div>
    <!-- 新衣和严选 -->
    <div class="attire">
      <van-row class="attireRow">
        <van-col class="attrireCol" span="12">
          <a :href="clothes.targetUrl">
            <p>{{ clothes.title }}</p>
            <p>{{ clothes.desc }}</p>
            <img :src="clothes.picUrl" alt="">
          </a>
        </van-col>
        <van-col class="attrireCol" span="12">
          <a :href="strictSelect.targetUrl">
            <p>{{ strictSelect.title }}</p>
            <p>{{ strictSelect.desc }}</p>
            <img :src="picUrlOne" alt="">
            <img class="attrireImg" :src="picUrlTow" alt="">
          </a>
        </van-col>
      </van-row>
    </div>
    <!-- 首页底部 -->
    <div class="footerContainer">
      <van-row justify="center">
        <van-col class="footerCol" span="5">
          <a href="">下载APP</a>
        </van-col>
        <van-col class="footerCol" span="5">
          <a href="">电脑版</a>
        </van-col>
      </van-row>
      <p>网易公司版权所有 © 1997- <br>食品经营许可证：JY13301080111719 </p>
    </div>
    <!-- 礼物图标 -->
    <a href=" " class="gift">
      <i></i>
    </a>

    <!-- 回到顶部 -->
    <van-back-top class="backTop" bottom="60" right="10" offset="700">
      <van-icon name="arrow-up" color="#ccc" />
    </van-back-top>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import homeApi, { type CateGoryListModel, type SwiperListModel, type PolicyDescListModel, type ClassificationListModel, type PopularModel, type IndexActivityModuleModel, type CategoryHotSellModuleModel, type SceneLightShoppingGuideModuleModel, type StyleBannerAndItemModel } from '@/api/home'
import { showNotify } from 'vant';


// 用于存储导航栏数据
const navList = ref<CateGoryListModel>([])
// 获取导航栏数据的函数
const getNavListData = async () => {
  try {
    let result = await homeApi.getNavList()
    navList.value = result.data.categoryList
    
  } catch (error) {
    showNotify({ type: 'danger', message: '获取导航栏数据失败，请重试' });

  }
}

//用于存储轮播图数据 
const swiperList = ref<SwiperListModel>([])
// 存储保障的数据
const policyDescList = ref<PolicyDescListModel>([])
// 存储宫格的分类数据
const classificationList = ref<ClassificationListModel>([])
// 初始化爆款直降的数据
const initPopularList = (): PopularModel => ({
  schemeUrl: '',
  picUrl: '',
  itemList: []
})
// 存储爆款直降数据
const popularList = ref<PopularModel>(initPopularList())
// 存储爆款下的健康等数据
const popularDownList = ref<PopularModel[]>([])
// 存储新人专享的数据
const indexActivityModule = ref<IndexActivityModuleModel>([])
// 存储类目热销榜的数据
const categoryHotSellModule = ref<CategoryHotSellModuleModel>({
  categoryList: [],
  title: ''
})
// 存储穿新衣与严选的数据
const sceneLightShoppingGuideModule = ref<SceneLightShoppingGuideModuleModel>([])
// 存储穿新衣数据
const clothes = ref<StyleBannerAndItemModel>({
  descColor: '',
  picUrl: '',
  titleColor: '',
  title: '',
  targetUrl: '',
  desc: ''
})
// 存储严选数据
const strictSelect = ref<StyleBannerAndItemModel>({
  descColor: '',
  picUrlList: [],
  titleColor: '',
  title: '',
  targetUrl: '',
  desc: ''
})
// 严选第一张图
const picUrlOne = ref<string>('')
// 严选第二张图
const picUrlTow = ref<string>('')

// 获取推荐页面的数据
const getRecommendListData = async () => {
  try {
    let result = await homeApi.getRecommendList()
    swiperList.value = result.data.data.focusList
    policyDescList.value = result.data.data.policyDescList
    classificationList.value = result.data.data.kingKongModule.kingKongList
    // 存储爆款
    popularList.value = result.data.data.bigPromotionModule.floorList[0].cells[0]
    // 存储爆款下的数据
    // popularDownList.value = result.data.data.bigPromotionModule.floorList[1].cells
    // 存储新人专享
    indexActivityModule.value = result.data.data.indexActivityModule
    // 存储类目热销榜单的数据
    categoryHotSellModule.value = result.data.data.categoryHotSellModule
    // 存储穿新衣与严选的数据
    // sceneLightShoppingGuideModule.value = result.data.data.sceneLightShoppingGuideModule
    clothes.value = result.data.data.sceneLightShoppingGuideModule[0].styleBanner
    strictSelect.value = result.data.data.sceneLightShoppingGuideModule[1].styleItem
    picUrlOne.value = result.data.data.sceneLightShoppingGuideModule[1].styleItem.picUrlList[0]
    picUrlTow.value = result.data.data.sceneLightShoppingGuideModule[1].styleItem.picUrlList[1]

    // console.log('穿新衣',sceneLightShoppingGuideModule.value);
    console.log('穿新衣', clothes.value);

  } catch (error) {
    showNotify({ type: 'danger', message: '获取导航栏数据失败，请重试' });
  }
}


onMounted(() => {
  getNavListData()
  getRecommendListData()
})
</script>

<style  scoped>
.logo {
  width: 2rem;
  display: inline-block;
  margin: .35rem 0 0 .4rem;
}

.headerSearch {
  width: 6rem;
  border: 0;

  margin: -0.1rem 0 0 0;
  padding: .3rem;
  border-radius: .27rem;
  --van-search-content-background: #ededed;
  --van-search-action-text-color: #000;
}

.van-search__content {
  border-radius: 1rem;
  background: #f00;
}

.loginBtn {
  margin: .4rem 0 0 .1rem;
  width: 1rem;
  height: .53rem;
  color: rgb(199, 43, 43);
  line-height: .53rem;
  text-align: center;
  font-size: .22rem;
  border-radius: .1rem;
  border: .03rem solid rgb(199, 43, 43);
}

/* 导航栏相关样式 */
.tabs:deep(.van-tabs__line) {
  position: absolute;
  bottom: .6rem;
  left: 0;
  z-index: 1;
  width: var(--van-tabs-bottom-bar-width);
  height: var(--van-tabs-bottom-bar-height);
  background: var(--van-tabs-bottom-bar-color);
  border-radius: var(--van-tabs-bottom-bar-height);
}

/* 轮播图相关样式 */
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: .53rem;
  line-height: 4rem;
  text-align: center;
  background-color: #39a9ed;
}

.my-swipe {
  height: 4.5rem;
  margin-top: -0.13rem;
}

/* 保障相关样式 */
.policy_info {
  text-align: center;
  height: .6rem;
  line-height: .7rem;
  margin: 0 .5rem 0 .2rem;
}

.policy_info .myicon {
  vertical-align: middle;
  width: .5rem;
  margin-right: .13rem;
}

.policy_info span {
  font-size: .32rem;
  line-height: .8rem;
}

/* 爆款直降的相关样式 */
.popular {
  display: block;
  width: 100%;
  height: 2.67rem;
  background-image: url('@/views/home/images/popular.gif');
  background-size: 100% 2.67rem;
  position: relative;
}

.popularImg {
  position: absolute;
  width: 2.17rem;
  height: 2.17rem;
  top: .21rem;
  left: 1.07rem;
}

.smallImage {
  width: 2.17rem;
}

/* 爆款直降下的那块的相关样式 */
.healthy {
  display: block;
  width: 92%;
  height: 2.9rem;
  background-size: 100%;
  margin: .27rem .19rem 0;
  position: relative;
}

.healthy img {
  display: block;
  position: absolute;
  top: 1.1rem;
  left: .6rem;
  width: 1.9rem;
  background-size: 100%;
}

/* 新人专享的相关样式 */
.people {
  height: 1.33rem;
  margin-left: 2.93rem;
}

.people span {
  font-size: .53rem;
}

.people span:nth-child(2) {
  line-height: 1.6rem !important;
  font-size: .45rem;
  margin: 0 .27rem 0;
  margin-top: .27rem;
}

.newPeople {
  height: 5.87rem;
}

.newPeople .newPeopleCol .newPeopleLeft {
  width: 4.56rem;
  height: 100%;
  background-color: #f9e9cf;
  margin-left: .4rem;
}

.newPeople .newPeopleCol .newPeopleLeft span {
  font-size: .43rem;
  padding-left: .4rem;
  line-height: 1.41rem;
  height: .53rem;
}

.newPeople .newPeopleCol .newPeopleLeft img {
  width: 3.47rem;
  margin: .13rem 0 0 .53rem
}

.newPeople .newPeopleCol .newPeopleRight {
  width: 4.56rem;
  height: 100%;
}

.newPeople .newPeopleCol .newPeopleRight .newPeopleRightTop {
  width: 4.56rem;
  height: 2.91rem;
  background-color: #f9e9cf;
  margin-bottom: .05rem;
  position: relative;
}

.newPeople .newPeopleCol .newPeopleRight .newPeopleRightTop .newPeopleTitle1 {
  font-size: .45rem;
  padding: .27rem 0 0 .37rem;
}

.newPeople .newPeopleCol .newPeopleRight .newPeopleRightTop .newPeopleTitle2 {
  font-size: .32rem;
  color: gray;
  padding-left: .37rem;
}

.newPeople .newPeopleCol .newPeopleRight .newPeopleRightTop img {
  position: absolute;
  top: .43rem;
  left: 1.33rem;
  width: 80%;
  height: 90%;
}

.newPeopleRightTop .price {
  position: absolute;
  font-size: .24rem;
  top: .27rem;
  right: .53rem;
  width: 1.2rem;
  height: 1.2rem;
  opacity: .8;
  background: #f59524;
  border-radius: 50%;
  padding-top: .1rem;
  color: #fff;
  text-align: center;
  line-height: .5rem;

}

.newPeopleRightTop .price p:nth-child(2) {
  text-decoration: line-through;
}

/* 类目热销榜相关样式 */
/* 类目热销榜 */
.hot {
  margin-top: -0.4rem;
}

.hot p {
  margin: 1rem 0 0 .42rem;
  font-size: .43rem;
}

.hot .hotRow {
  margin-left: .4rem;
  margin-top: .4rem;
}

.hot .hotRow .hotCol12 div {
  background-color: #f9f3e4;
  height: 2.67rem;
  width: 4.53rem;
  margin-top: -1.07rem;
  margin-bottom: .13rem;
  position: relative;
}

.hot .hotRow .hotCol12 div img {
  position: absolute;
  width: 57%;
  left: 2rem;
  top: 0;
}

.hot .hotRow .hotCol12 div p {
  line-height: 2.43rem;
  margin-left: .27rem;
  font-size: .37rem;
}

.hot .hotRow .hotCol12 div span {
  position: absolute;
  top: 1.25rem;
  left: .27rem;
  color: #333;
}

.hot .hotRow .hotCol6 div {
  height: 2.4rem;
  width: 2.2rem;
  background-color: #f5f5f5;
  margin-top: -1.01rem;
  margin-bottom: .11rem;
}

.hot .hotRow .hotCol6 div p {
  font-size: .35rem;
  margin-left: .27rem;
  line-height: .8rem;
}

.hot .hotRow .hotCol6 div img {
  width: 1.87rem;
  margin-left: 0.27rem;
  margin-top: -0.27rem;
}

/*新衣和严选 */
.attire {
  margin-top: 1.07rem
}

.attire .attireRow .attrireCol a {
  display: block;
  width: 4.57rem;
  height: 3.52rem;
  margin-left: .43rem;
  background-color: #f5f5f5;
  position: relative;
}

.attire .attireRow .attrireCol a img {
  position: absolute;

}

.attire .attireRow .attrireCol:nth-child(1) a img {
  width: 4.57rem;
  height: 3.52rem;
  top: 0;
  left: 0;
}

.attire .attireRow .attrireCol:nth-child(2) a img {
  width: 2rem;
  left: .27rem;
  top: 1.47rem;
}

.attire .attireRow .attrireCol:nth-child(2) a .attrireImg {
  left: 2.27rem
}

.attire .attireRow .attrireCol:nth-child(2) a {
  display: block;
  margin-left: .08rem;
}

.attire .attireRow .attrireCol a p {
  padding-left: .4rem;
}

.attire .attireRow .attrireCol a p:nth-child(1) {
  padding-top: .37rem;
  font-size: .43rem;
}

.attire .attireRow .attrireCol a p:nth-child(2) {
  position: absolute;
  z-index: 99;
  font-size: .35rem;
  color: #7f7f7f;
}

.attire .attireRow .attrireCol:nth-child(2) a p:nth-child(2) {
  color: #ff6f0f;
}

/* footer */
.footerContainer {
  width: 100%;
  height: 3.25rem;
  background-color: #333;
  margin-top: .8rem;
}

.footerContainer a {
  font-size: .4rem;
  color: #fff;
}

.footerContainer .footerCol {
  border: .03rem solid gray;
  border-radius: .08rem;
  margin-right: .53rem;
  margin-left: .53rem;
  margin-top: .67rem;
}

.footerContainer .footerCol a {
  display: block;
  width: 2.85rem;
  height: .8rem;
  font-size: .32rem;
  padding-left: .4rem;
  line-height: .8rem;
}

.footerContainer p:nth-child(2) {
  padding-top: .27rem;
}

.footerContainer p {
  font-size: .32rem;
  color: #999;
  text-align: center;
  margin-top: .2rem;
}

/* 礼物图标 */
.gift {
  position: fixed;
  right: 0;
  bottom: 3.4rem;
  display: block;
  z-index: 10;
  -webkit-animation: moveLeft .5s;
  animation: moveLeft .5s;
}

.gift i {
  background-image: url('./images/gift.png');
  display: inline-block;
  vertical-align: middle;
  width: 1.52rem;
  height: 1rem;
  background-size: 4.37rem 4rem;
  background-position: -1.26rem -2.52rem;
}

/* 回到顶部 */
.backTop {
  /* --van-back-top-text-color: #fff; */
  /* --van-back-top-background: #fff; */
}
</style>